기타 Property

✒️ 2025-05-16 12:58 내용 수정

수업을 들으면서 카테고리 분류가 애매한 속성들을 정리했다.
CSS Property 목록 사이트 : https://www.quackit.com/css/properties/

cursor

cursor : 속성값;

속성값	설명	속성값	설명
`pointer`	가리키는 손 모양	`alias`	외부로 가는 작은 화살표 추가
`help`	도움말 표시 "?" 추가	`copy`	화살표에 + 모양 추가
`progress`	화살표와 상태 진행형 원 추가	`move`, `all-scroll`	4방향 화살표 모양
`wait`	상태 진행형 원 모양	`no-drop`	금지 표시 모양
`cell`	엑셀 표 선택용 + 모양	`not-allowed`	금지 표시 모양
`crosshair`	+ 모양	`grab`	잡는 손 모양
`text`	텍스트 입력 커서 "I" 모양	`grabbing`	움켜진 손 모양
`vertical-text`	text 커서 세로형	`col-resize`	<-\|\|-> 모양
`e-resize`, `w-resize`	수평 양방향 화살표	`row-resize`	col-resize의 90도 돌린 모양
`n-resize`, `s-resize`	수직 양방향 화살표	`zoom-in`	확대
`ne-resize`, `sw-resize`, `nesw-resize`	북동쪽 양방향 화살표	`zoom-out`	축소
`nw-resize`, `se-resize`, `nwse-resize`	북서쪽 양방향 화살표	`<url>` `[<x> <y>]`	커스텀 이미지와 크기

참고 자료 : mdn web docs user-select, 민트코딩's css-real 드래그(drag) 막기

속성값	설명
`none`	해당 요소와 하위 요소를 선택(드래그)할 수 없음
`auto`	기본은 text로 적용됨
	부모 요소의 select 속성값을 따라가고, 수정 가능한 요소라면 contain으로 적용. ::before와 ::after는 none으로 적용됨
`text`	해당 요소를 선택(드래그)할 수 있음
`contain`	해당 요소 내부에서 선택(드래그)할 수 있음. 선택의 경계가 추가되는 것
`all`	일부 영역만 선택해도 해당 영역을 포함하는 전체 영역이 선택됨

-ms, -mox, -webkit 등은 브라우저를 나타내는 접두사이다.
- 참고 자료 : mdn web docs Webkit (-webkit-) vendor-prefixed CSS extensions

.like-btn{
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}